<template>
    <div class="scoreBody">
        <el-button type="text" @click="goback">
            <i class="el-icon-back">返回</i>
        </el-button>
        <div>
            <el-form
                ref="form"
                :model="form"
                :rules="rules"
                label-width="80px"
                class="demo-ruleForm"
            >
                <el-form-item label="总体点评" prop="value" required>
                    <div class="block" style="padding:10px;">
                        <el-rate v-model="form.value" show-text></el-rate>
                    </div>
                </el-form-item>
                <el-form-item label="活动时间" prop="date" required>
                    <el-col :span="10">
                        <el-date-picker
                            type="date"
                            placeholder="选择日期"
                            v-model="form.date"
                            style="width: 100%;"
                        ></el-date-picker>
                    </el-col>
                </el-form-item>
                <el-form-item label="点评内容" prop="desc" required>
                    <el-input
                        type="textarea"
                        v-model="form.desc"
                        placeholder="旅行中有哪些亮点？哪些发现？给迷茫的游友们指条明路吧~"
                        rows="5"
                    ></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="onSubmit('form')">评分</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            form: {
                value: null,
                date: "",
                desc: ""
            },
            rules: {
                value: [
                    {
                        required: true,
                        message: "请选择评分",
                        trigger: "blur"
                    }
                ],
                date: [
                    {
                        required: true,
                        message: "请选择日期",
                        trigger: "blur"
                    }
                ],
                desc: [
                    {
                        required: true,
                        message: "点评内容",
                        trigger: "blur"
                    }
                ]
            }
        };
    },
    methods: {
        onSubmit(formName) {
            console.log(this.form);
            this.$refs[formName].validate(valid => {
                if (valid) {
                    this.$router.push({
                        path: "/scenery/presentation"
                    });
                    this.$message({
                        message: "评论成功",
                        type: "success"
                    });
                } else {
                    this.$message({
                        message: "请认真填写表单",
                        type: "warning"
                    });
                    return false;
                }
            });
        },
        goback() {
            this.$router.go(-1);
        }
    },
    mounted() {
        if (!this.$global.user) {
            this.$router.push({
                path: "/dl",
                query: { path: this.$route.path }
            });
        }
    }
};
</script>
<style>
div.scoreBody {
    margin: 5px;
    margin-bottom: 10px;
    padding: 20px 20px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    background-color: #fff;
}
</style>